<template>
  <div class="login">
    <div class="login-container">
      <div class="login-text">
        <span>您好，</span>
        <span>欢迎使用{{ title }}</span>
      </div>
      <div class="login-img"></div>
      <van-form @submit="submitForm">
        <van-cell-group inset>
          <van-field v-model="loginForm.username" placeholder="用户名" />
          <van-field v-model="loginForm.password" type="password" placeholder="密码" />
        </van-cell-group>
        <div class="logininfo">
          <div class="infoleft">
            <div
              :class="[state.loginForm.remember ? 'select' : 'notState']"
              @click="selected"
            ></div>
            <span>记住登录状态</span>
          </div>
          <div class="inforight">
            <!-- <span>忘记密码?</span> -->
          </div>
        </div>
        <div class="submit-button-row">
          <van-button round block type="primary" native-type="submit" :loading="loading">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store'
import { showToast } from 'vant'
import CryptoJS from 'crypto-js'

/**
 * 登录界面类型
 */
interface ILoginState {
  loading: boolean
  loginForm: {
    username: string
    password: string
    remember: boolean
  }
}
// let loginState = ref(false)
const title = import.meta.env.VITE_APP_DEFAULT_TITLE

const router = useRouter()
const route = useRoute()
const store = useUserStore()
const state = reactive<ILoginState>({
  loading: false,
  loginForm: {
    username: '',
    password: '',
    remember: false
  }
})
// 登录
const submitForm = async () => {
  try {
    if(!state.loginForm.username){
      showToast("请输入用户名")
      return
    }
    if(!state.loginForm.password){
      showToast("请输入密码")
      return
    }
    state.loading = true
    const key = CryptoJS.enc.Utf8.parse('AD42F6697B035B75')
    const srcs = CryptoJS.enc.Utf8.parse(state.loginForm.password)
    const encrypted = CryptoJS.AES.encrypt(srcs, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    })

    const loginForm = {
      username: state.loginForm.username,
      password: encrypted.toString(),
      remember: state.loginForm.remember
    }

    await store.login(loginForm)
    router.replace('/home')
  } catch (error) {
    console.log(error, 'e')
    // showToast(error)
  }
  state.loading = false
}
const selected = () => {
  state.loginForm.remember = !state.loginForm.remember
}

const { loading, loginForm } = toRefs(state)

const params = route.query
if (params.user && params.pwd) {
  state.loginForm.username = params.user as string
  state.loginForm.password = params.pwd as string
  submitForm()
}
</script>

<style scoped lang="less">
.login {
  overflow-y: scroll;
  height: 100vh;
  background: #0027e9 url(@/assets/login/loginBack.png);
  background-size: cover;
  background-repeat: no-repeat;

  .login-container {
    .login-text {
      height: 55px;
      display: flex;
      flex-direction: column;
      padding: 141px 0 0 70px;
      justify-content: space-between;
      margin-bottom: 16px;

      span {
        color: #ffffff;
        font-size: 24px;
        letter-spacing: 1px;
        font-weight: bold;
      }
    }

    .login-img {
      width: 173px;
      height: 146px;
      background: url(@/assets/login/loginImg.png);
      background-size: 100% 100%;
      margin: auto;
    }
  }

  .title {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .submit-button-row {
    margin-top: 40px;
  }

  :deep(.van-cell-group) {
    margin-left: 0;
    margin-right: 0;
    background: none;
    // opacity: 50%;

    .van-cell {
      border-radius: 29px;
      backdrop-filter: blur(8px);
      background: rgba(73, 181, 243, 1);
      opacity: 80%;

      .van-cell__title {
        width: 3.2rem;

        #van-field-1-label,
        #van-field-2-label {
          color: #ffffff;
          opacity: 70%;
        }
      }
    }

    .van-cell:nth-child(1) {
      margin-bottom: 20px;
    }
  }

  :deep(.van-form) {
    padding: 0 59px;
  }

  :deep(.van-button) {
    font-weight: 500;
    color: #4389f3;
    font-size: 15px;
    background: #ffffff;
  }

  .logininfo {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;

    .infoleft,
    .inforight {
      span {
        font-weight: bold;
        color: #ffffff;
        font-size: 10px;
        letter-spacing: 1px;
      }
    }

    .infoleft {
      display: flex;
      align-items: center;

      .notState {
        width: 11px;
        height: 11px;
        border: 1px solid #ffffff;
        border-radius: 3px;
        margin-right: 3px;
        // background: #0027e9 url(@/assets/login/statenull.png);
        // background-size: cover;
        // background-repeat: no-repeat;
      }

      .select {
        width: 11px;
        height: 11px;
        border: 1px solid #ffffff;
        border-radius: 3px;
        margin-right: 3px;
        background: #0027e9 url(@/assets/login/stateok.png);
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
  }

  ::-webkit-input-placeholder {
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 2px;
  }
  :deep(.van-field__control) {
    color: white;
  }
}
</style>
